<!-- 老年人服务包详情切换 -->
<template>
	<!-- 若没有服务包 -->
	<image v-if="!packgeInfo._id" src="/static/u3462.svg" mode=""></image>
	<!-- 顶部 -->
	<view v-else>
		<view class="category-header">
			<status-bar></status-bar>
			<!-- 导航栏内容 -->
			<view class="nav-bar">
				<text class="title">{{packgeInfo.servicePackId.name}}详情</text>
			</view>
		</view>

		<view class="card-list" v-for="(item, index) in packgeInfo.servicePackId?.serviceItemIds" :key="index">
			<view class="card-box">
				<view class="card-left">
					<text class="service-title">{{item.name}}</text>
					<view class="remaining-count">剩余次数：<text class="count">{{item.count}}</text>次</view>
					<button class="payment-tag">{{item.type}}</button>
				</view>
				<view class="card-right">
					<button class="record-btn" @click="toserviceCords()">服务记录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useContractStore
	} from '../../../store/contract';
	import {
		useUserStore
	} from '../../../store/user';
	import StatusBar from '@/components/status-bar/status-bar.vue';
	// 获取用户状态机
	const userStore = useUserStore();
	//获取签约状态机
	const contractStore = useContractStore();
	//服务包信息
	const packgeInfo = ref({})
	onMounted(() => {
		if (contractStore.contractDetail) {
			packgeInfo.value = {
				...contractStore.contractDetail,
			};
		}
	});



	// 点击服务记录按钮跳转到我的随访服务记录页面
	function toserviceCords() {
		uni.navigateTo({
			url: "/minepackge/pages/mine-servicerecords/mine-servicerecords"
		});
	}
	// function toserviceCords() {
	// 		uni.navigateTo({
	// 			url: `/minepackge/pages/mine-servicerecords/mine-servicerecords?serviceItemId=${packgeInfo.value.servicePackId
	// ._id}&doctorId=${packgeInfo.value.doctorId._id}`
	// 		});
	// 	}
</script>

<style scoped lang="scss">
	.category-header {
		background-color: #fff;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-bar {
		height: 40rpx;
		display: flex;
		align-items: center;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.card-list {
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

	}

	.card-box {
		width: 100%;
		height: 230rpx;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.card-left {
		display: flex;
		flex-direction: column;
		gap: 16rpx;

		.service-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.remaining-count {
			font-size: 28rpx;
			color: #666;

			.count {
				color: #FA746B;
				font-weight: bold;
			}
		}

		.payment-tag {
			width: 140rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 16rpx;
			font-size: 24rpx;
			padding: 0;
			margin: 0;
			border: none;
			background-color: rgba(250, 116, 107, 0.2);
			color: #FA746B;
		}
	}

	.card-right {
		.record-btn {
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			border-radius: 16rpx;
			background-color: #2984F8;
			color: #fff;
			font-size: 28rpx;
			padding: 0;
			margin: 0;
			border: none;
		}
	}
</style>